<!-- 支付设置页面 -->
<script src="/cropper/cropper.js"></script>
<script src="/cropper/canvas-to-blob.js"></script>
<link rel="stylesheet" href="/cropper/cropper.min.css">
<link rel="stylesheet" href="/css/afterLoginPage.css">
<style>
#showCopperImg {
	width: 100%;
	height: 300px;
}
.copper-img-show {
	max-width:100%;
    max-height:300px;
    width: 80%;
}
.layui-upload-button {
    cursor: pointer;
}
.show-preview {
	margin-top: 20px;
	margin-left:90px;
}
.show-preview .preview-lg {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin-left: 10px;
}
.show-preview .preview-md {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-left: 10px;
}
.show-preview .preview-sm {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
}
.layui-layer-btn0 {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
}
.layui-layer-btn1{
	border-color: #4898d5 !important;
    background-color: #2e8ded !important;
    color: #fff !important;
}
.layui-form-label-90{
	width:90px!important;
	font-family:PingFangSC-Medium;
	font-size:14px;
	color:rgb(71, 71, 71);
}
.mobile{
	line-height:34px;
}
/* 移动端 */
@media screen and (max-width: 850px),@media screen  and (orientation: landscape),
only screen and (max-device-width: 850px) {
	.layui-form-item {
	    margin-bottom: 0.4rem;
	}
	.layui-form-label {
	    padding: 0.24rem 0.4rem;
	    width: 2.133333rem!important;
	}
	.layui-form-label, .layui-form-mid, .layui-input, .layui-textarea, .layui-form-radio span {
	    font-size: 0.373333rem !important;
	    line-height: normal;
	}
	.layui-form-item .layui-input-inline {
	    width: 5.066667rem;
	    margin-right: 0.266667rem;
	}
	.layui-input, .layui-select, .layui-textarea {
	    height: 1.013333rem;
	    line-height: 1.013333rem;
	    border: 0.026667rem solid #b3b3b3;
	    border-radius: 0.053333rem;
	}
	.layui-input, .layui-textarea {
	    padding-left: 0.266667rem;
	}
	.layui-form-mid {
	    padding: 0;
	    margin-left: 2.9rem;
	    margin-right: 0;
	}
	.layui-btn{
		margin-left: 2.9rem!important;
		margin-top:0.266667rem!important;
	    height: 1.013333rem;
	    line-height: 1.013333rem;
	    padding: 0 0.48rem;
	    font-size: 0.373333rem;
	    border-radius: 0.053333rem;
	}
	.mobile{
		line-height:0.906667rem;
	}
	.phone-layui-input-block{
		position: relative;
        margin-left: 3rem;
    }
    input[name='smsCode']{
    	display: inline-block;
    	width: 3rem;
    }
    .editPhone{
    	position: absolute;
    	top: 0;
    	right: 0;
    	margin-left:0!important;
    	margin-top:0!important;
    }
}
</style>
<div class="main layui-clear" style="min-height: 600px;position: relative;margin-bottom: 33px;">
	<div class="layui-bar">
    	<div class="layui-breadcrumbs">
    		<a class="home" href="/"></a>
			<i class="layui-icon">&#xe602;</i>
	  		<a href="/user/profile.html">个人资料</a>
	  		<i class="layui-icon">&#xe602;</i>
	  		<a href="/user/payment.html">个人资料</a>
    	</div>
    </div>
    <#include "/apps/user/userTopInformation.html">
	 <div class="ukefu-profile-menu">
		<#include "/apps/user/userinfo.html">
	</div>
	
	<div class="ukefu-profile">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:10px 20px;">
			<#include "/apps/user/profilemenu.html">
			<div class="layui-tab-content">
				<!-- 支付设置 -->
				<div class="layui-tab-item layui-show">
					<div class="layui-form mine-view" style="display: block;">
						<form class="layui-form">
							<input type="hidden" id="id" name="id" class="layui-input" value="${personalpaymentData.id!''}">
							<div class="layui-form-item">
								<label for="" class="layui-form-label layui-form-label-90">开户银行</label>
					            <div class="layui-input-inline">
					              	<input type="text" id="paymenttype" name="paymenttype" lay-verify="required" 
					              	autocomplete="off" class="layui-input" value="${personalpaymentData.paymenttype!''}" <#if personalpaymentData.paymenttype !=''>disabled</#if>>
					            </div>
							</div>
							<div class="layui-form-item">
								<label for="" class="layui-form-label layui-form-label-90">账号</label>
					            <div class="layui-input-inline">
					              	<input type="text" id="paymentno" name="paymentno" lay-verify="required|number"
					              	 autocomplete="off" class="layui-input" value="${personalpaymentData.paymentno!''}" <#if personalpaymentData.paymentno !=''>disabled</#if>>
					            </div>
							</div>
							<div class="layui-form-item">
								<label for="" class="layui-form-label layui-form-label-90">开户人姓名</label>
					            <div class="layui-input-inline">
					              	<input type="text" id="paymentperson" name="paymentperson" lay-verify="required" 
					              	autocomplete="off" class="layui-input" value="${personalpaymentData.paymentperson!''}" <#if personalpaymentData.paymentperson !=''>disabled</#if>>
					            </div>
							</div>
							<#if personalpaymentData.paymenttype !=''><!-- 信息不为空时 -->
								<div class="layui-form-item">
									<label for="" class="layui-form-label layui-form-label-90">已验证手机</label>
						            <div class="layui-input-inline mobile">
						            	<input type="hidden" id="mobile" value="${personalpaymentData.mobile!''}">
						            	
						            	${personalpaymentData.mobile[0..2]?default("")}*****${personalpaymentData.mobile[8..10]?default("")}
						            </div>
								</div>
								<div class="layui-form-item">
									<label for="" class="layui-form-label layui-form-label-90">手机校验码</label>
						            <div class="layui-input-block phone-layui-input-block">
						              	<input type="text" id="smsCode" name="smsCode" lay-verify="required|smsCode" 
						              	autocomplete="off" class="layui-input">
						              	<a class="layui-btn sendCode editPhone" onclick="checkCode()">获取验证码</a>
						            </div>
								</div>
							</#if>
							<div class="layui-form-item">
								<#if personalpaymentData.paymenttype ==''><!-- 信息为空时 -->
									<button style="margin-left: 120px;margin-top: 10px;" id="pay-btn" class="layui-btn" lay-filter="pay-btn" 
									lay-submit="pay-btn">提交支付账号</button>
								</#if>
								<#if personalpaymentData.paymenttype !=''><!-- 信息不为空时 -->
									<button style="margin-left: 120px;margin-top: 10px;" id="pay-btn" class="layui-btn" lay-filter="pay-btn" 
									lay-submit="pay-btn">修改支付账号</button>
								</#if>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
layui.use(['element','form'], function(){
  var element = layui.element() , form = layui.form();
  form.verify({ 
	  smsCode: function(value, item){ 
  			var isreturn = true;
  			$.ajax({
			  type:"POST",
			  url:"/checkTelCode",
			  async: false,
			  data: {smsCode: $("#smsCode").val()},
			  success:function(data){
				  if(data == "error"){
					  isreturn = false;
				  }
			  }
		   })
  		   if(isreturn!=true){
  		        return "验证码输入错误！";
  		   }
	    },
	});   
  form.on('submit(pay-btn)', function(data){
	  paymentSet();
	  return false;
	});
});
var count = 30; //手机验证码间隔时间（秒）
//设置支付
function paymentSet(){
	if($("#pay-btn").html() == "修改支付账号"){
		$("#pay-btn").html("提交支付账号");
		$("#paymenttype").attr("disabled",false);
		$("#paymentno").attr("disabled",false);
		$("#paymentperson").attr("disabled",false);
		return false;
	}else if($("#pay-btn").html() == "提交支付账号"){
		$.ajax({
			type: "post",
			url: "/user/paymentSet.html",
			dataType:'text',
			data:{"id":$("#id").val(),"paymenttype":$("#paymenttype").val(),"paymentno":$("#paymentno").val(),"paymentperson":$("#paymentperson").val(),},
			success: function(data){
				if(data == "success"){
					layer.open({
						  icon: 1, 
						  title:'提示',
						  skin: 'layui-layer-demo', //样式类名
						  closeBtn: 1, //不显示关闭按钮
						  shadeClose: true, //开启遮罩关闭
						  content: '修改成功!',
						  btn: ['确定'],
						  yes: function(){
					               window.location.reload();
					          }
					});
				}else{
					layer.alert('修改失败', {icon: 2});
				}
			},
			error: function(data){
				layer.alert('修改失败', {icon: 2});
			}
		})
	}
	
}

/* 发送手机验证码 */
function checkCode(){
	if($("#mobile").val()!=''){
		curCount = count; 
	　　//设置button效果，开始计时 
	    $(".sendCode").addClass("disabledBtn"); 
		$.ajax({
			  type:"POST",
			  url:"/sendSmsPay",
			  data:{phoneNum:$("#mobile").val()},
			  contentType: "application/x-www-form-urlencoded; charset=utf-8",  
			  success:function(data){
				  if(data == "success"){
					   $(".sendCode").text(curCount + "秒后可重新发送"); 
					  InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
				  }else{
					  $(".sendCode").removeClass("disabledBtn");//启用按钮 
			          $(".sendCode").text("发送验证码"); 
					  console.log("失败");
				  }
			  }
		  })
	}
	
}

//手机验证延时发送
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $(".sendCode").removeClass("disabledBtn");//启用按钮 
        $(".sendCode").text("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $(".sendCode").text(curCount + "秒后可重新发送"); 
      } 
} 
</script>







